<template>
  <div class="">
    <el-dialog @close="close" width="80%" :title="$t('label_purchase_generate_order')" append-to-body
      :visible.sync="dialogVisible">

      <el-form :model="formData" ref="formRef" :rules="rules">
        <ex_super_table v-bind="tableOption" :data="formData.suggestList" ref="tableRef" />
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">{{ $tt('label_confirm') }}</el-button>
        <el-button @click="dialogVisible = false">{{ $tt('label_cancel') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        suggestList: []
      },
      rules: {
        supplierId: [{ required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' }],
        purchaser: [{ required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' }],
        apportionFreight: [{ required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' }],
        suggestQty: [{ required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' }],
      },
      tableOption: {
        model: [
          { key: 'skuName', "min-width": 130, label: 'label_sku_name', formatter: (r, c, v) => this.$formatNameCode(v, r.skuNameEn), 'show-overflow-tooltip': true, },
          {
            key: "skuCode",
            label: "label_sku_code",
            "min-width": 130,
            "show-overflow-tooltip": true,
          },
          {
            key: "supplierId",
            label: "label_supplier",
            "min-width": 130,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const rule = this.rules[column.property]
              return (
                <el-form-item
                  prop={`suggestList.${index}.${column.property}`}
                  rules={rule}
                >
                  <supplier_select_input
                    value={row.supplierId}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </supplier_select_input>
                </el-form-item>
              )
            }
          },
          {
            key: "purchaser",
            label: "label_sku_buyer",
            "min-width": 130,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const rule = this.rules[column.property]
              return (
                <el-form-item
                  prop={`suggestList.${index}.${column.property}`}
                  rules={rule}
                >
                  <ex_super_input
                    value={row[column.property]}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              )
            }
          },
          {
            key: "apportionFreight",
            label: "label_apportion_freight",
            "min-width": 130,
            "label-class-name": "label_require_before",
            render: (h, { row, column, index }) => {
              const rule = this.rules[column.property]
              return (
                <el-form-item
                  prop={`suggestList.${index}.${column.property}`}
                  rules={rule}
                >
                  <ex_super_input
                    type="select"
                    enum="PurchaseApportionFreightEnum"
                    value={row[column.property]}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              )
            }
          },
          {
            key: "suggestQty",
            label: "label_purchase_suggest_count",
            "label-class-name": "label_require_before",
            "min-width": 130,
            render: (h, { row, column, index }) => {
              const rule = this.rules[column.property]
              return (
                <el-form-item
                  prop={`suggestList.${index}.${column.property}`}
                  rules={rule}
                >
                  <ex_super_input
                    value={row[column.property]}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              )
            }
          },
          {
            label: 'label_expected_arrival',
            key: 'predictDay',
            "min-width": 130,
            render: (h, { row, column, index }) => {
              const items = [
                { label: this.$t('label_day_within', ['1']), value: '1' },
                { label: this.$t('label_day_within', ['3']), value: '3' },
                { label: this.$t('label_day_within', ['5']), value: '5' },
                { label: this.$t('label_day_within', ['7']), value: '7' },
                { label: this.$t('label_day_within', ['9']), value: '9' },
                { label: this.$t('label_day_within', ['15']), value: '15' },
              ]
              return (
                <el-form-item
                  prop={`suggestList.${index}.${column.property}`}
                >
                  <ex_select_auto
                    items={items}
                    value={row[column.property]}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  >
                  </ex_select_auto>
                </el-form-item>
              )
            }
          },

          {
            key: "skuPrice",
            label: "label_unit_price",
            "min-width": 130,
            "show-overflow-tooltip": true,
          },
          { key: 'currencyCode', label: 'label_currency_kind', "min-width": 130, formatter: (r, c, v, i) => this.$enumShow(v, "CurrencyTypeEnum"), 'show-overflow-tooltip': true, },
          {
            key: "stockQty",
            label: "label_stock_count",
            "min-width": 130,
            "show-overflow-tooltip": true,
          },
          {
            key: "safeStockQty",
            label: "label_safety_stock_count",
            "min-width": 130,
            "show-overflow-tooltip": true,
          },
          {
            key: "remark",
            label: "label_remark",
            "min-width": 130,
            "show-overflow-tooltip": true,
            render: (h, { row, column, index }) => {
              const rule = this.rules[column.property]
              return (
                <el-form-item
                  prop={`suggestList.${index}.${column.property}`}
                  rules={rule}
                >
                  <ex_super_input
                    value={row[column.property]}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                  />
                </el-form-item>
              )
            }
          },
          {
            type: "operate",
            width: 100,
            operate: [
              {
                label: "label_remove",
                click: (row, index) => this.removeFn(index),
              },
            ]
          }
        ],
      },
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    show(rows) {
      if (rows) {
        this.formData.suggestList = JSON.parse(JSON.stringify(rows))
        this.dialogVisible = true
      }
    },
    close() {
      this.$refs['formRef'].resetFields()
    },
    submit() {
      this.$refs['formRef'].validate((valid, obj) => {
        if (valid) {
          console.log(this.formData.suggestList)
          this.$ajax({
            url: '/oms-api/purchase/OmsPurchaseSuggestRpc/generatePurchaseOrder.json',
            type: "json",
            data: {
              suggestList: this.formData.suggestList.map(it => {
                return {
                  id: it.id,
                  supplierId: it.supplierId,
                  purchaser: it.purchaser,
                  apportionFreight: it.apportionFreight,
                  remark: it.remark,
                  predictDay: it.predictDay,
                  suggestQty: it.suggestQty
                }
              })
            },
            success: (res) => {
              this.$message.success(this.$tt('tip_submit_success'))
              this.$emit('submit')
              this.dialogVisible = false
            },
          });
        }
      })


    },
    removeFn(index) {
      this.formData.suggestList.splice(index, 1)
    },

  },
  destroyed() {

  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  padding: 0 20px;
}
</style>
